import React from "react";
import { TabBar } from "antd-mobile";
import Icon from "../Icon";
import "./index.scss";
import {useNavigate,useLocation} from 'umi'
export default function index() {
  const navigate = useNavigate()
  const location=useLocation()
  return (
    <div className="tabbarDiv">
      <TabBar
        activeKey={location.pathname}
        onChange={(key) => {
         navigate(key)
      }}>
        <TabBar.Item
          key="/home"
          title={((active) => <span style={{color:active?'#fc5a5a': '#333'}}>首页</span>)}
          icon={((active) => <Icon name="icon-home" size={22} color={ active?'red':'#333' } />) }
        />
        <TabBar.Item
          key="/itemLists"
           title={((active) => <span style={{color:active?'#fc5a5a': '#333'}}>分类</span>)}
          icon={((active) => <Icon name="icon-app" size={22} color={ active?'red':'#333' } />) }
        />
        <TabBar.Item
          key="/cart"
           title={((active) => <span style={{color:active?'#fc5a5a': '#333'}}>购物车</span>)}
          icon={((active) => <Icon name="icon-cart" size={22} color={ active?'red':'#333' } />) }
        />
        <TabBar.Item
          key="/mine"
          title={((active) => <span style={{color:active?'#fc5a5a': '#333'}}>我的</span>)}
          icon={((active) => <Icon name="icon-user" size={22} color={ active?'red':'#333' } />) }
        />
      </TabBar>
    </div>
  );
}
